<template>
  <div class="table-page-search-wrapper" style="margin-top: 20px;">
    <a-form layout="inline" @keyup.enter.native="search">
      <a-row :gutter="48">
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="品牌">
            <a-select v-model="queryParam.brandId" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="brand.weid" v-for="brand in brandList" :key="brand.weid">{{ brand.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="商品标题">
            <a-input v-model="queryParam.productName" placeholder="请输入" allowClear />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="款号">
            <a-input v-model="queryParam.productNo" placeholder="请输入" allowClear />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="上架状态">
            <a-select v-model="queryParam.shelf" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">上架</a-select-option>
              <a-select-option value="2">下架</a-select-option> 
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="尺码表">
            <a-select v-model="queryParam.display" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">显示</a-select-option>
              <a-select-option value="2">隐藏</a-select-option> 
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="尺码推荐">
            <a-select v-model="queryParam.recommend" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">开</a-select-option>
              <a-select-option value="2">关</a-select-option> 
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="24" :xl="24" :lg="24" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            <a-button :disabled="btnDisabled" style="margin-left: 8px" @click="handleToggleSize('display', 1)">显示尺码表</a-button>
            <a-button :disabled="btnDisabled" style="margin-left: 8px" @click="handleToggleSize('display', 2)">隐藏尺码表</a-button>
            <a-button :disabled="btnDisabled" style="margin-left: 8px" @click="handleToggleSize('recommend', 1)">开启尺码推荐</a-button>
            <a-button :disabled="btnDisabled" style="margin-left: 8px" @click="handleToggleSize('recommend', 2)">关闭尺码推荐</a-button>
            <a-button style="margin-left: 8px" @click="handleExport">导出表格</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { templateUpload, templateDownload } from '@/api/micromall/communityUser'
import { brandList } from '../components/brandList.js'
export default {
  props: {
    btnDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      brandList,
      uploadUrl: templateUpload,
      queryParam: {
        brandId: '',
        shelf: '',
        display: '',
        recommend: ''
      }
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleExport() {
      this.$emit('onExport')
    },

    handleToggleSize(type, v) {
      this.$emit('onToggleSize', type, v)
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    search() {
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    reset() {
      this.queryParam = {
        brandId: '',
        shelf: '',
        display: '',
        recommend: ''
      }
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] && values[i].length) {
          if (i === 'time') {
            console.log('time')
            formValue.startTime = values[i][0]
            formValue.endTime = values[i][1]
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
.product {
  display: flex;
  align-items: center;
  overflow: hidden;
  .img {
    display: block;
    margin: 0 2px;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }
  .product-name {
    flex: 1;
    margin-left: 5px;
    width: 80px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
}
</style>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
